<template>
  <!-- 参赛者信息 -->
  <div id="main">
    <div class="flex items-center mb-4 h-12">
      <el-button
        icon="el-icon-refresh"
        class="ml-4"
        type="info"
        plain
        @click="refresh"
      >刷新</el-button>
    </div>
    <div class="content" v-if="chooseCT">
      <el-card header="忠实粉丝" class="mb-5">
        <div v-for="i in 3" class="flex m-5 shadow p-5 items-center rounded">
          <img class="h-12 mr-5 rounded shadow" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
          <span>汉堡包{{i}}号</span>
          <span class="m-auto">参加了您的比赛：{{9-i}}/14</span>
          <span class="m-auto">最经常的成绩：{{['八强','亚军','NULL'][i]}}</span>
          <span>查看</span>
        </div>
      </el-card>
      <el-card header="用户信息统计分布"
        :body-style="{display:'grid',gridTemplateColumns:'repeat(3,33%)'}"
      >
        <div class="hw-box">
          <chart-pie
            id="pict1"
            title="性别分布"
            :chartdata="[
              {name:'男',value:255},
              {name:'女',value:125}
            ]"
            class="hw-content"
          />
        </div>
        <chart-pie
          id="pict2"
          title="年龄分布"
          :chartdata="[
            {name:'成年人',children:[
              {name:'26岁以上', value:12},
              {name:'18-20岁', value:86},
              {name:'20-22岁', value:78},
              {name:'22-24岁', value:54},
              {name:'24-26岁', value:34}
            ]},
            {name:'未成年',children:[
              {name:'12岁以下', value:1},
              {name:'12-14岁', value:4},
              {name:'14-16岁', value:5},
              {name:'16-18岁', value:8}
            ]}
          ]"
        />
        <div>
          <p class="font-bold">忠实地区</p>
          <p class="flex justify-around items-center">
            <svg viewBox="0 0 1024 1024" width="32" height="32"><path d="M392 440.3l-148-73.2c-16.3-8.1-30.5 0.1-31.7 18.3l-10.6 164.8c-1.2 18.2 11.1 39.5 27.5 47.6L377.1 671c16.3 8.1 30.6-0.1 31.7-18.3l10.6-164.8c1.3-18.2-11.1-39.5-27.4-47.6z m339.3-195.9l-148-73.2c-16.3-8.1-30.6 0.1-31.7 18.3L541 354.2c-1.2 18.2 11.1 39.5 27.5 47.6l148 73.2c16.3 8.1 30.6-0.1 31.7-18.3l10.6-164.8c1.1-18.1-11.1-39.4-27.5-47.5z" fill="#FEAE30" p-id="1432"></path><path d="M559.9 725.4c5.7 9.9 16.6 11.4 27 5.4l81.9-47.4c8-4.6 10.8-14.6 6.3-22.6-4.6-8-14.8-10.7-22.8-6.2L599.7 685l13.6-33.2c14.8-36.2 20.5-56.1 5.9-81.4l-0.2-0.4c-16.3-28.2-47.6-34.6-78.9-16.5-22.9 13.2-32.3 29.6-36.3 50.6-0.8 4.2 0 9 2.1 12.5 4.9 8.4 15.5 11.2 23.8 6.4 5.2-3 7.7-7.6 8.4-11.2 3.1-13.9 7.5-21.8 17-27.4 11.9-6.8 24.2-4.8 31.6 7.9 7.2 12.5 4.8 25.2-5.2 51.4l-22.6 60c-2.9 7.9-2.7 15.3 1 21.7z" fill="#E5E5E5" p-id="1433"></path><path d="M900.9 507c10.5 24.5 6.1 52.3-9.8 72.9-36.9 44.8-118.5 108.5-221.2 169.1-100.4 59.1-193.4 98.9-250.1 110.2-26.4 4.3-53.7-5.9-70.2-27.8 0.3 0.4 0.4 1 0.8 1.4L110.2 522c0.1-0.3 0.6-0.2 0.2-1-6.8-11.7-2.6-26.8 9.3-33.6 4.5-2.7 9.6-3.2 14.5-2.8l222.5 45.9-16.3-294.3c-0.4-12.3 5.9-24.5 17.5-31.1 10.8-6.3 23.5-5.6 33.6-0.2l248.1 162.2 70.1-211.6c0.1 0 0.2 0.8 0.2 0.5 1.7-5.9 5.7-11.2 11.5-14.6 11.9-6.8 26.9-2.9 33.7 8.8 0.3 0.6 0.4 0.1 0.8 0.2l148 361.2c-1-1.6-2.2-2.7-3-4.6z" fill="#FED530" p-id="1434"></path><path d="M487.1 426.2c65.6-37.8 149.4-15.4 187.4 50.2 37.8 65.6 15.4 149.4-50.2 187.4-65.6 37.8-149.4 15.4-187.4-50.2s-15.4-149.4 50.2-187.4z" fill="#FEAE30" p-id="1435"></path><path d="M584.1 606.2c6.1 10.6 19.6 14.2 30.2 8.1 10.6-6.1 14.2-19.6 8.1-30.2l-62.3-102.7c-6.1-10.6-19.6-14.2-30.2-8.1l-0.5 0.3c-5.3 3-10.1 7.5-16.2 13.7L492.5 509c-6.5 6.8-7.8 16.2-3.2 24 5.2 9.1 17.4 12.1 26.4 6.8 2.1-1.2 4.4-3.2 6.2-5l11.6-11.4 50.6 82.8z" fill="#FED530" p-id="1436"></path></svg>
            <span>广东-广州</span>
            <span class="m-auto">52</span>
          </p>
          <p class="flex justify-around items-center">
            <svg viewBox="0 0 1024 1024" width="32" height="32"><path d="M392 440.3l-148-73.2c-16.3-8.1-30.5 0.1-31.7 18.3l-10.6 164.8c-1.2 18.2 11.1 39.5 27.5 47.6L377.1 671c16.3 8.1 30.6-0.1 31.7-18.3l10.6-164.8c1.3-18.2-11.1-39.5-27.4-47.6z m339.3-195.9l-148-73.2c-16.3-8.1-30.6 0.1-31.7 18.3L541 354.2c-1.2 18.2 11.1 39.5 27.5 47.6l148 73.2c16.3 8.1 30.6-0.1 31.7-18.3L758.7 292c1.2-18.2-11-39.5-27.4-47.6z" fill="#C6C6C6" p-id="1586"></path><path d="M559.9 725.4c5.7 9.9 16.6 11.4 27 5.4l81.9-47.4c8-4.6 10.8-14.6 6.3-22.6-4.6-8-14.8-10.7-22.8-6.2L599.7 685l13.6-33.2c14.8-36.2 20.5-56.1 5.9-81.4l-0.2-0.4c-16.3-28.2-47.6-34.6-78.9-16.5-22.9 13.2-32.3 29.6-36.3 50.6-0.8 4.2 0 9 2.1 12.5 4.9 8.4 15.5 11.2 23.8 6.4 5.2-3 7.7-7.6 8.4-11.2 3.1-13.9 7.5-21.8 17-27.4 11.9-6.8 24.2-4.8 31.6 7.9 7.2 12.5 4.8 25.2-5.2 51.4l-22.6 60c-2.9 7.9-2.7 15.3 1 21.7z" fill="#E8E8E8" p-id="1587"></path><path d="M900.9 507c10.5 24.5 6.1 52.3-9.8 72.9-36.9 44.8-118.5 108.5-221.2 169.1-100.4 59.1-193.4 98.9-250.1 110.2-26.4 4.3-53.7-5.9-70.2-27.8 0.3 0.4 0.4 1 0.8 1.4L110.2 522c0.1-0.3 0.6-0.2 0.2-1-6.8-11.7-2.6-26.8 9.3-33.6 4.5-2.7 9.6-3.2 14.5-2.8l222.5 45.9-16.3-294.3c-0.4-12.3 5.9-24.5 17.5-31.1 10.8-6.3 23.5-5.6 33.6-0.2l248.1 162.2 70.1-211.6c0.1 0 0.2 0.8 0.2 0.5 1.7-5.9 5.7-11.2 11.5-14.6 11.9-6.8 26.9-2.9 33.7 8.8 0.3 0.6 0.4 0.1 0.8 0.2l148 361.2c-1-1.6-2.2-2.7-3-4.6z" fill="#E8E8E8" p-id="1588"></path><path d="M487.1 426.2c65.6-37.8 149.4-15.4 187.4 50.2 37.8 65.6 15.4 149.4-50.2 187.4-65.6 37.8-149.4 15.4-187.4-50.2s-15.4-149.4 50.2-187.4z" fill="#C6C6C6" p-id="1589"></path><path d="M538.2 627.2c5.4 9.3 15.7 10.7 25.4 5.1l77.2-44.5c7.6-4.3 10.2-13.7 5.8-21.3-4.3-7.6-13.9-10.1-21.5-5.7l-49.6 28.6 12.9-31.2c13.9-34.1 19.4-52.9 5.6-76.7l-0.2-0.4c-15.4-26.6-44.9-32.6-74.3-15.6-21.5 12.4-30.5 27.9-34.3 47.7-0.8 3.9 0 8.4 1.9 11.9 4.5 7.9 14.5 10.6 22.5 6.1 4.9-2.8 7.2-7.1 8-10.6 3-13.1 7-20.6 16-25.7 11.1-6.5 22.8-4.5 29.7 7.5 6.8 11.8 4.4 23.7-4.9 48.3L537.2 607c-2.7 7.1-2.6 14 1 20.2z" fill="#E8E8E8" p-id="1590"></path></svg>
            <span>山东-济南</span>
            <span class="m-auto">44</span>
          </p>
          <p class="flex justify-around items-center">
            <svg viewBox="0 0 1024 1024" width="32" height="32"><path d="M392 439.3l-148-73.2c-16.3-8.1-30.5 0.1-31.7 18.3l-10.6 164.8c-1.2 18.2 11.1 39.5 27.5 47.6L377.1 670c16.3 8.1 30.6-0.1 31.7-18.3l10.6-164.8c1.3-18.2-11.1-39.5-27.4-47.6z m339.3-195.9l-148-73.2c-16.3-8.1-30.6 0.1-31.7 18.3L541 353.2c-1.2 18.2 11.1 39.5 27.5 47.6l148 73.2c16.3 8.1 30.6-0.1 31.7-18.3L758.7 291c1.2-18.2-11-39.5-27.4-47.6z" fill="#AA733D" p-id="1894"></path><path d="M559.9 724.4c5.7 9.9 16.6 11.4 27 5.4l81.9-47.4c8-4.6 10.8-14.6 6.3-22.6-4.6-8-14.8-10.7-22.8-6.2L599.7 684l13.6-33.2c14.8-36.2 20.5-56.1 5.9-81.4l-0.2-0.4c-16.3-28.2-47.6-34.6-78.9-16.5-22.9 13.2-32.3 29.6-36.3 50.6-0.8 4.2 0 9 2.1 12.5 4.9 8.4 15.5 11.2 23.8 6.4 5.2-3 7.7-7.6 8.4-11.2 3.1-13.9 7.5-21.8 17-27.4 11.9-6.8 24.2-4.8 31.6 7.9 7.2 12.5 4.8 25.2-5.2 51.4l-22.6 60c-2.9 7.9-2.7 15.3 1 21.7z" fill="#E5E5E5" p-id="1895"></path><path d="M900.9 506c10.5 24.5 6.1 52.3-9.8 72.9-36.9 44.8-118.5 108.5-221.2 169.1-100.4 59.1-193.4 98.9-250.1 110.2-26.4 4.3-53.7-5.9-70.2-27.8 0.3 0.4 0.4 1 0.8 1.4L110.2 521c0.1-0.3 0.6-0.2 0.2-1-6.8-11.7-2.6-26.8 9.3-33.6 4.5-2.7 9.6-3.2 14.5-2.8l222.5 45.9-16.3-294.3c-0.4-12.3 5.9-24.5 17.5-31.1 10.8-6.3 23.5-5.6 33.6-0.2l248.1 162.2 70.1-211.6c0.1 0 0.2 0.8 0.2 0.5 1.7-5.9 5.7-11.2 11.5-14.6 11.9-6.8 26.9-2.9 33.7 8.8 0.3 0.6 0.4 0.1 0.8 0.2l148 361.2c-1-1.6-2.2-2.7-3-4.6z" fill="#CA9561" p-id="1896"></path><path d="M487.1 425.2c65.6-37.8 149.4-15.4 187.4 50.2 37.8 65.6 15.4 149.4-50.2 187.4-65.6 37.8-149.4 15.4-187.4-50.2s-15.4-149.4 50.2-187.4z" fill="#AA733D" p-id="1897"></path><path d="M600.1 619.3c30.1-17.4 37.7-46.7 23.1-72.2l-0.2-0.4c-14.5-25.1-37.9-24.3-58.1-16.9l11.8-40.5c2.4-8.3 3.6-14.4-0.8-21.7-4.6-8.1-13.9-9.4-22.6-4.4l-65.6 38.2c-6.9 4-9.4 13.1-5.4 20.1 4 6.9 13.1 9.4 20.1 5.4l41.4-23.9-10.8 41.4c-1.9 7.2-1.7 11.8 0.6 15.8 4 6.9 13.1 9.4 20.1 5.4l4.6-2.7c16.5-9.6 29.9-9.1 36.3 1.9l0.2 0.4c5.8 10.1 1.5 21-9.6 27.4-10.6 6.2-20.6 7.4-32.2 5.2-3.5-0.5-7.4-0.6-11.6 1.8-7.7 4.4-10.5 14.8-6.1 22.5 2.5 4.2 7.1 6.9 11.1 7.7 16.5 3 34.5 0.6 53.7-10.5z" fill="#CA9561" p-id="1898"></path></svg>
            <span>江苏-南京</span>
            <span class="m-auto">42</span>
          </p>
          <p v-for="i in 3" class="flex justify-around items-center">
            <svg viewBox="0 0 1024 1024" width="32" height="32"><path d="M690.3 152.6v131.5L564.1 314v18.8H447.8V313l-123.2-29V153c-128.1 66.4-215.7 200.2-215.7 354.5 0 220.4 178.6 399 399 399s399-178.6 399-399c0-154.6-88-288.7-216.6-354.9z" fill="#1452F1" p-id="2203"></path><path d="M564.2 331.8l126.2-19V152.6c-38.8-19.9-81.3-33.8-126.2-40.1v219.3zM447.8 333V113c-43.8 6.6-85.3 20.4-123.2 40.1v159.7L447.8 333z" fill="#0878F9" p-id="2204"></path><path d="M447.8 313.2v19.5h116.4V314L508 327.2z" fill="#2CD5FF" p-id="2205"></path><path d="M507.9 108.6c-20.4 0-40.5 1.5-60.1 4.5v200l60.2 14.2 56.2-13.3V112.5c-18.4-2.6-37.2-3.9-56.3-3.9z" fill="#2CD5FF" p-id="2206"></path><path d="M507.9 108.6c-20.4 0-40.5 1.5-60.1 4.5v200l60.2 14.2 56.2-13.3V112.5c-18.4-2.6-37.2-3.9-56.3-3.9z" fill="#0091FF" p-id="2207"></path><path d="M633.8 685.3c-33.9 1.5-63.3 13.7-88.4 36.6s-50.1 22.9-75.1 0c-25.1-22.9-54.5-35-88.4-36.6-33.9-1.5-51.6-19.2-53.1-53.1-1.5-33.9-13.7-63.3-36.6-88.4s-22.9-50.1 0-75.1c22.9-25.1 35-54.5 36.6-88.4 1.5-33.9 19.2-51.6 53.1-53.1 33.9-1.5 63.3-13.7 88.4-36.6 25.1-22.9 50-22.9 75.1 0 25.1 22.9 54.5 35 88.4 36.6 33.9 1.6 51.6 19.2 53.1 53.1s13.7 63.3 36.6 88.4c22.9 25.1 22.9 50.1 0 75.1-22.9 25.1-35 54.5-36.6 88.4-1.5 33.8-19.2 51.6-53.1 53.1z" fill="#2CD5FF" p-id="2208"></path></svg>
            <span>--省--市</span>
            <span class="m-auto">-</span>
          </p>
        </div>
        <div class="hw-box">
          <div class="hw-content flex">
            <span class="m-auto">其他。。。</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  // import { randomRGB } from '@/plugins/util.js'
  import chartPie from '../modules/pie.vue'
  import choosect from './modules/chooseCT.vue'
  export default {
    name: 'PersonalInformation',
    components:{choosect,chartPie},
    data() {
      return {
        chooseCT:1//false
      }
    },
    watch: {
    },
    created() {
    },
    mounted() {
      window.addEventListener('resize', this.resizeChart)
    },
    methods: {
      resizeChart() {
        console.log("resize")
      },
      refresh() {
        const chooseCT = this.$refs.chooseCT.getVS()
        console.log({chooseCT})
        this.chooseCT = chooseCT
      }
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    }
  }
</script>
<style lang="scss" scoped>
#main {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  .content{
    height: calc(100% - 1rem - 3rem);
    overflow-y: scroll;
    +div{
      
    }
  }
}
// .el-card__body::v-deep{
//   grid-template-columns:repeat(3,33%)
// }
</style>